<template>
  <div>
    <div class="sku-title">测量尺码</div>
    <a-row class="measure">
      <a-button type="primary" @click="handleAdd" style="margin-right: 8px; ">保存测量尺寸方案</a-button>
      <j-search-select-tag type="list" v-model="skuModel.skuSizeSchemeId" :dictOptions="skuSizeSchemeOptions" placeholder="请选择sku方案"  style="width: 10%;" @change="queryById"/>
      <a-button type="danger" style="margin-left: 8px;" @click="handleDelete" v-if="skuModel.skuSizeSchemeId">删除方案</a-button>
      <a-button type="primary" style="margin-left: 8px;" @click="handleGenerate">生成尺码表</a-button>
      <a-col :span="24">
        <a-form-model-item label="测量尺寸SIZE" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="size">
          <a-input v-model.trim="skuModel.size" placeholder="请输入测量尺寸SIZE" @blur="handleBlur" ></a-input>
        </a-form-model-item>
        <div style="color: #f5222d; margin-top: -25px;" v-if="isShow">请使用英文逗号分隔！</div>
      </a-col>
      <a-col :span="8" v-for="(item, index) in skuSizeSchemeItemList" :key="index">
        <a-form-model-item :label="item.name" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number v-model="item.begin" placeholder="请输入" ></a-input-number>
          到
          <a-input-number v-model="item.end" placeholder="请输入" ></a-input-number>
          差值
          <a-input-number v-model="item.diffValue" placeholder="请输入" ></a-input-number>
        </a-form-model-item>
      </a-col>
    </a-row>

    <a-modal v-model="visible" title="sku方案" @ok="handleSkuOk" @cancel="handleCancel">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="方案名称" :labelCol="{xs: { span: 24 }, sm: { span: 4 }}" :wrapperCol="wrapperCol">
            <a-input v-model.trim="skuModel.name" placeholder="请输入方案名称"  ></a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { getAction, postAction, deleteAction } from '@/api/manage'
export default {
  name: 'SkuMeasureSize',
  props: {
    model: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return {
      visible: false,
      isShow: false,
      skuModel: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      skuSizeSchemeItemList: [],
      skuSizeSchemeOptions: [],
      url: {
        add: "/hzkj-product/product/productLibrary/skuSizeScheme/add",
        labelList: "/hzkj-product/product/productLibrary/skuSizeScheme/label/list",
        skuSizeSchemeList: "/hzkj-product/product/productLibrary/skuSizeScheme/list",
        delete: "/hzkj-product/product/productLibrary/skuSizeScheme/delete",
        generate: "/hzkj-product/product/productLibrary/skuSizeTable/generate",
        queryById: "/hzkj-product/product/productLibrary/skuSizeScheme/queryById",
        edit: "/hzkj-product/product/productLibrary/skuSizeScheme/edit"
      }
    }
  },
  watch: {
    model: {
      immediate: true,
      handler(val){
        if(val.id){
          this.skuSizeSchemeList();
        }
      }
    }
  },
  created(){
    this.getLabelList();
  },
  methods: {
    getLabelList(){
      getAction(this.url.labelList).then((res) => {
        if(res.success){
          this.skuSizeSchemeItemList = res.result || [];
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    skuSizeSchemeList(){
      getAction(this.url.skuSizeSchemeList, { skuId: this.model.id }).then((res) => {
        if(res.success){
          let skuSizeSchemeOptions = (res.result && res.result.records) || [];
          this.skuSizeSchemeOptions = skuSizeSchemeOptions.map(item => {
            return {
              ...item,
              text: item.name,
              value: item.id
            }
          })
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    handleAdd(){
      if(!this.skuModel.size){
        this.$message.warning('请输入测量尺寸SIZE!');
        return;
      }
      let skuSizeSchemeItemList = this.skuSizeSchemeItemList.filter(item => {
        return item.diffValue || item.diffValue == 0;
      }) || [];
      if(!(skuSizeSchemeItemList && skuSizeSchemeItemList.length)){
        this.$message.warning('请输入测量属性!');
        return;
      }
      this.visible = true;
    },
    handleSkuOk(){
      let skuSizeSchemeItemList = this.skuSizeSchemeItemList.filter(item => {
        return item.diffValue || item.diffValue == 0;
      }) || [];
      let params = {
        name: this.skuModel.name,
        skuId: this.model.id,
        size: this.skuModel.size,
        skuSizeSchemeItemList: skuSizeSchemeItemList.map(item => {
          return {
            begin: item.begin,
            diffValue: item.diffValue,
            end: item.end,
            skuSizeLabelId: item.id
          }
        })
      }
      postAction(this.url.add, params).then((res) => {
        if(res.success){
          this.$message.success(res.message);
          this.handleCancel();
          // 清除数据
          this.resetForm();
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    handleCancel(){
      this.visible = false;
      this.skuModel.name = '';
    },
    handleDelete(){
      if(!this.skuModel.skuSizeSchemeId){
        this.$message.warning('请选择要删除的sku方案！');
        return;
      }
      deleteAction(this.url.delete, { id: this.skuModel.skuSizeSchemeId }).then((res) => {
        if(res.success){
          this.$message.success(res.message);
          // 清空数据
          this.resetForm();
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    handleGenerate(){
      if(!this.skuModel.size){
        this.$message.warning('请输入测量尺寸SIZE!');
        return;
      }
      let skuSizeSchemeItemList = this.skuSizeSchemeItemList.filter(item => {
        return item.diffValue || item.diffValue == 0;
      }) || [];
      if(!(skuSizeSchemeItemList && skuSizeSchemeItemList.length)){
        this.$message.warning('请输入测量属性!');
        return;
      }
      let params = {
        skuSizeSchemeId: this.skuModel.skuSizeSchemeId,
        skuId: this.model.id,
        size: this.skuModel.size,
        skuSizeTableSchemeItemList: skuSizeSchemeItemList && skuSizeSchemeItemList.map(item => {
          return {
            ...item,
            skuSizeLabelId: item.id
          }
        })
      }
      postAction(this.url.generate, params).then((res) => {
        if(res.success){
          this.$message.success(res.message);
          let generate = res.result || {};
          generate.tableData = generate.tableData ? JSON.parse(generate.tableData) : [];
          generate.tableHeader = generate.tableHeader ? JSON.parse(generate.tableHeader) : [];
          this.$emit('handleGenerate', generate);
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    handleBlur(){
      if(!this.skuModel.size){
        this.isShow = false;
        return;
      }
      if(!/^[0-9a-zA-Z,]+$/.test(this.skuModel.size)){
        this.isShow = true;
      }else{
        this.isShow = false;
      }
    },
    queryById(id){
      this.skuModel.size = '';
      this.getLabelList();
      if(!id){
        return;
      }
      getAction(this.url.queryById, { id }).then((res) => {
        if(res.success){
          this.skuModel.size = (res.result && res.result.size) || '';
          let skuSizeSchemeItemList = (res.result && res.result.skuSizeSchemeItemList) || [];
          this.skuSizeSchemeItemList = this.skuSizeSchemeItemList.map(item => {
            let curItem = skuSizeSchemeItemList.find(cur => cur.skuSizeLabelId === item.id);
            if(curItem){
              return {
                ...item,
                begin: curItem.begin,
                end: curItem.end,
                diffValue: curItem.diffValue
              }
            }else{
              return item;
            }
          })
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    resetForm(){
      this.skuModel.skuSizeSchemeId = '';
      this.skuModel.size = '';
      this.skuSizeSchemeList();
      this.getLabelList();
    }
  }
}
</script>

<style lang="less" scoped>
.measure{
  margin-top: 15px;
  /deep/.ant-form-item-children{
    white-space: nowrap;
    .ant-input-number:nth-child(1){
      margin-right: 4px;
    }
    .ant-input-number:nth-child(2){
      margin: 0 8px 0 4px;
    }
    .ant-input-number:nth-child(3){
      margin-left: 4px;
    }
  }
}
</style>